// 审批节点
<template>
  <div class="t_drawer_body">
    <Tabs class="t_tabs" :tabBarStyle="{ height: '45px' }">
      <TabPane key="1" tab="基础设置">
        <t_tab_container>
          <div class="tab_content">
            <fieldLabel>标题设置</fieldLabel>
            <Input v-model="data.title" />
            <fieldLabel>谁可以发起默认所有人,需要设置请选择</fieldLabel>
            <div class="cc_setting">
              <chooserRole
                :requestConfig="requestConfig"
                ref="chooserRole"
                :propsSelected="data.initiateRole"
              />
              <chooserPerson
                :requestConfig="requestConfig"
                :propsSelected="data.initiator"
                ref="chooserPerson"
              />
            </div>
          </div>
        </t_tab_container>
      </TabPane>
      <TabPane key="2" tab="高级设置" force-render>
        <t_tab_container>
          <div class="tab_content">
            <fieldLabel>操作设置</fieldLabel>
            <div class="action_group">
              <CheckBox
                :checked="data.hasSubimtBtn"
                @change="(e) => (data.hasSubimtBtn = e.target.checked)"
                class="custom_checkbox"
                >同意</CheckBox
              >
              <Input v-model="data.submitBtnText" />
            </div>
            <div class="action_group">
              <CheckBox
                :checked="data.hasSaveBtn"
                @change="(e) => (data.hasSaveBtn = e.target.checked)"
                class="custom_checkbox"
                >草稿</CheckBox
              >
              <Input v-model="data.saveBtnText" />
            </div>
            <div class="action_group">
              <CheckBox
                :checked="data.hasPressBtn"
                @change="(e) => (data.hasPressBtn = e.target.checked)"
                class="custom_checkbox"
                >催办</CheckBox
              >
              <Input v-model="data.pressBtnText" />
            </div>
            <div class="action_group">
              <CheckBox
                :checked="data.hasRevokeBtn"
                @change="(e) => (data.hasRevokeBtn = e.target.checked)"
                class="custom_checkbox"
                >撤回</CheckBox
              >
              <Input v-model="data.revokeBtnText" />
            </div>
            <div class="action_group">
              <CheckBox
                :checked="data.hasPrintBtn"
                @change="(e) => (data.hasPrintBtn = e.target.checked)"
                class="custom_checkbox"
                >打印</CheckBox
              >
              <Input v-model="data.printBtnText" />
            </div>
            <fieldLabel>打印设置</fieldLabel>
            <Select style="width: 100%" v-model="data.printId"> </Select>
          </div>
        </t_tab_container>
      </TabPane>
      <TabPane key="3" tab="节点事件">
        <t_tab_container>
          <div class="tab_content">
            <fieldLabel>自定义发起事件</fieldLabel>
            <A_Switch v-model="data.hasInitFunc" />
            <template v-if="data.hasInitFunc">
              <fieldLabel>发起事件请求路径</fieldLabel>
              <Input
                addon-before="GET"
                placeholder="请输入接口地址"
                v-model="data.initInterfaceUrl"
              />
            </template>
            <fieldLabel>自定义结束事件</fieldLabel>
            <A_Switch v-model="data.hasEndFunc" />
            <template v-if="data.hasEndFunc">
              <fieldLabel>结束事件请求路径</fieldLabel>
              <Input
                addon-before="GET"
                placeholder="请输入接口地址"
                v-model="data.endInterfaceUrl"
              />
            </template>
            <fieldLabel>自定义撤回事件</fieldLabel>
            <A_Switch v-model="data.hasFlowRecallFunc" />
            <template v-if="data.hasFlowRecallFunc">
              <fieldLabel>撤回事件请求路径</fieldLabel>
              <Input
                addon-before="GET"
                placeholder="请输入接口地址"
                v-model="data.flowRecallInterfaceUrl"
              />
            </template>
          </div>
        </t_tab_container>
      </TabPane>
    </Tabs>
    <div class="t_buttom_group">
      <Button style="margin-right: 10px" @click="() => $emit('close')"
        >取消</Button
      >
      <Button type="primary" @click="confirm">确定</Button>
    </div>
  </div>
</template>

<script>
import t_tab_container from "./components/t_tab_container.vue";
import fieldLabel from "./components/fieldLabel.vue";
import chooserRole from "./components/chooserRole.vue";
import chooserPerson from "./components/chooserPerson.vue";
import Button from "ant-design-vue/lib/button/button";
import Tabs from "ant-design-vue/lib/tabs";
import Input from "ant-design-vue/lib/input";
import CheckBox from "ant-design-vue/lib/checkbox";
import A_Switch from "ant-design-vue/lib/switch/index";
import Select from "ant-design-vue/lib/select";
import EventBus from "../eventBus";

import { verify_o } from "../../utils/verify";
import message from "ant-design-vue/lib/message";

const { TabPane } = Tabs;
const { Option } = Select;
const SelectOption = Option;
export default {
  components: {
    t_tab_container,
    fieldLabel,
    chooserRole,
    chooserPerson,
    Button,
    Tabs,
    TabPane,
    Input,
    CheckBox,
    A_Switch,
    Select,
    SelectOption,
  },
  props: {
    nodeData: Object,
    requestConfig: Object,
  },

  watch: {
    "data.hasInitFunc": function (val) {
      if (!val) {
        this.data.initInterfaceUrl = "";
      }
    },
    "data.hasEndFunc": function (val) {
      if (!val) {
        this.data.endInterfaceUrl = "";
      }
    },
    "data.hasFlowRecallFunc": function (val) {
      if (!val) {
        this.data.flowRecallInterfaceUrl = "";
      }
    },
  },

  computed: {},
  data() {
    return {
      data: JSON.parse(JSON.stringify(this.nodeData.dataProps)),
    };
  },

  methods: {
    increase(key) {
      let percent = this["percent" + key] + 10;
      if (percent > 100) {
        percent = 100;
      }
      this["percent" + key] = percent;
    },
    decline(key) {
      let percent = this["percent" + key] - 10;
      if (percent < 0) {
        percent = 0;
      }
      this["percent" + key] = percent;
    },

    confirm() {
      let copyData = JSON.parse(JSON.stringify(this.data));
      let chooserRoleData = [];
      let chooserPersonData = [];
      if (this.$refs.chooserRole) {
        chooserRoleData = this.$refs.chooserRole.getSelectedData();
      }
      if (this.$refs.chooserPerson) {
        chooserPersonData = this.$refs.chooserPerson.getSelectedData();
      }
      copyData.initiateRole = chooserRoleData;
      copyData.initiator = chooserPersonData;

      let verifyInfo = verify_o(copyData);
      if (verifyInfo.pass) {
        // 通过验证
        EventBus.$emit("UPDATE_NODE", {
          nodeId: this.nodeData.nodeId,
          path: this.nodeData.path,
          dataProps: copyData,
        });
        this.$emit("close");
      } else {
        message.warning(verifyInfo.message.join("、"));
      }
    },
  },
};
</script>

<style scoped>
.t_drawer_body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 55px);
}

.t_tabs {
  flex: 1;
}

.t_buttom_group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}
.tab_content {
  padding: 0 24px;
}

.hint {
  font-size: 14px;
  color: #a5a5a5;
}

.cc_setting {
  display: flex;
  flex-direction: column;
}

.cust_btn_sty {
  width: 120px;
  margin-bottom: 10px;
}

.action_group {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.custom_checkbox {
  width: 100px;
}
</style>